<template>
  <div>
    <!--提示框-->
    <el-dialog
      :visible.sync="isShow"
      title="识别本地图片文字"
      width="800px">
      <div>
        <div v-if="identifyArr.length">
          <p
            v-for="(v, k) in identifyArr"
            :key="k">{{ v.words }}</p>
        </div>
        <image-up
          v-if="!identifyArr.length"
          ref="WImageUp"/>
      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button
          size="mini"
          @click="isShow = false">取 消</el-button>
        <el-button
          size="mini"
          v-if="identifyArr.length"
          type="info"
          @click="clearBtnClick">清 除</el-button>
        <el-button
          v-if="!identifyArr.length"
          type="primary"
          size="mini"
          @click="imageInentifyBtnClick">
          识 别
        </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api/apis'
import ImageUp from '@/components/global/imageUp/server'
import { get } from '@/api/ajax'
export default {
  name: 'WebToolImageIdentifyTextLoacl',
  components: {
    ImageUp
  },
  data() {
    return {
      // 识别出的文字
      identifyArr: [],
      // 是否显示
      isShow: false
    }
  },
  methods: {
    // 图片识别按钮点击
    imageInentifyBtnClick() {
      this.$refs['WImageUp'].upImage().then((data) => {
        this.$w_popview.showLoading('识别中...')
        get(API.baidu.localTextIdentify, {
          fileUrl: data.path
        }).then((data) => {
          if (data && data.length > 0) {
            this.identifyArr = data
          } else {
            this.$w_popview.msgError('没有识别出文字')
          }
        }).catch(() => {
          this.identifyArr = []
        }).finally(() => {
          this.$w_popview.hideLoading()
        })
      }).catch((err) => {
        this.$w_popview.msgError(err.msg)
      })
    },
    /**
     * 显示弹窗
     */
    show() {
      this.isShow = true
    },
    /**
     * 清除按钮点击
     */
    clearBtnClick() {
      this.identifyArr = []
      this.$refs['WImageUp'].clear()
    }
  }
}
</script>

<style scoped>

</style>
